<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.27">
    <link rel="icon" href="favicon.ico"><meta name="keywords" content="Cosla前端,Cosla开发,Cosla文档,酷斯啦前端,酷斯啦开发,酷斯啦文档"><title>代码优化 | 前端团队开发文档</title><meta name="description" content="Cosla开发，Cosla前端团队开发文档">
    <link rel="preload" href="/assets/js/runtime~app.7eeb5ba6.js" as="script"><link rel="preload" href="/assets/css/styles.a0dfb1ca.css" as="style"><link rel="preload" href="/assets/js/6135.d16fec79.js" as="script"><link rel="preload" href="/assets/js/app.4602c005.js" as="script">
    <link rel="stylesheet" href="/assets/css/styles.a0dfb1ca.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><!----><span class="site-name can-hide">前端团队开发文档</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/pages/resourcePack/" class="nav-link" aria-label="资源包"><!--[--><!--]--> 资源包 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/pages/knowledge/developmentNorm/" class="nav-link" aria-label="知识库"><!--[--><!--]--> 知识库 <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="开发事项"><span class="title">开发事项</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="开发事项"><span class="title">开发事项</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a href="/pages/developAttention/vehicleWebClient/" class="nav-link" aria-label="网页端"><!--[--><!--]--> 网页端 <!--[--><!--]--></a></li><li class="dropdown-item"><a href="/pages/developAttention/vehicleMiniprogram/" class="nav-link" aria-label="小程序端"><!--[--><!--]--> 小程序端 <!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="自定义组件"><span class="title">自定义组件</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="自定义组件"><span class="title">自定义组件</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a href="/pages/customComponents/vehicleWebClient/detailsLayout/" class="nav-link" aria-label="网页端"><!--[--><!--]--> 网页端 <!--[--><!--]--></a></li><li class="dropdown-item"><a href="/pages/customComponents/vehicleMiniprogram/plate/" class="nav-link" aria-label="小程序端"><!--[--><!--]--> 小程序端 <!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!----></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/pages/resourcePack/" class="nav-link" aria-label="资源包"><!--[--><!--]--> 资源包 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/pages/knowledge/developmentNorm/" class="nav-link" aria-label="知识库"><!--[--><!--]--> 知识库 <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="开发事项"><span class="title">开发事项</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="开发事项"><span class="title">开发事项</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a href="/pages/developAttention/vehicleWebClient/" class="nav-link" aria-label="网页端"><!--[--><!--]--> 网页端 <!--[--><!--]--></a></li><li class="dropdown-item"><a href="/pages/developAttention/vehicleMiniprogram/" class="nav-link" aria-label="小程序端"><!--[--><!--]--> 小程序端 <!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="自定义组件"><span class="title">自定义组件</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="自定义组件"><span class="title">自定义组件</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a href="/pages/customComponents/vehicleWebClient/detailsLayout/" class="nav-link" aria-label="网页端"><!--[--><!--]--> 网页端 <!--[--><!--]--></a></li><li class="dropdown-item"><a href="/pages/customComponents/vehicleMiniprogram/plate/" class="nav-link" aria-label="小程序端"><!--[--><!--]--> 小程序端 <!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/pages/knowledge/developmentNorm.html" class="nav-link sidebar-heading sidebar-item" aria-label="开发约定"><!--[--><!--]--> 开发约定 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/knowledge/commitNorm.html" class="nav-link sidebar-heading sidebar-item" aria-label="git 提交约定"><!--[--><!--]--> git 提交约定 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/knowledge/Vue3.html" class="nav-link sidebar-heading sidebar-item" aria-label="Vue3常用新特性"><!--[--><!--]--> Vue3常用新特性 <!--[--><!--]--></a><!----><!--]--><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-heading sidebar-item active" aria-label="代码优化"><!--[--><!--]--> 代码优化 <!--[--><!--]--></a><ul class=""><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#目的" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="目的"><!--[--><!--]--> 目的 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#优化方法" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="优化方法"><!--[--><!--]--> 优化方法 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#提炼函数" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="提炼函数"><!--[--><!--]--> 提炼函数 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#函数参数化" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="函数参数化"><!--[--><!--]--> 函数参数化 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#保证对象完整" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="保证对象完整"><!--[--><!--]--> 保证对象完整 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#搬移语句到函数" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="搬移语句到函数"><!--[--><!--]--> 搬移语句到函数 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#提炼变量" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="提炼变量"><!--[--><!--]--> 提炼变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#内联变量" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="内联变量"><!--[--><!--]--> 内联变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#封装变量" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="封装变量"><!--[--><!--]--> 封装变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#函数组合成变换函数" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="函数组合成变换函数"><!--[--><!--]--> 函数组合成变换函数 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#拆分阶段" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="拆分阶段"><!--[--><!--]--> 拆分阶段 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#以函数调用取代内联代码" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="以函数调用取代内联代码"><!--[--><!--]--> 以函数调用取代内联代码 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#拆分循环" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="拆分循环"><!--[--><!--]--> 拆分循环 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#拆分变量" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="拆分变量"><!--[--><!--]--> 拆分变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#分解条件表达式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="分解条件表达式"><!--[--><!--]--> 分解条件表达式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#合并条件表达式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="合并条件表达式"><!--[--><!--]--> 合并条件表达式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#以卫语句取代嵌套条件表达式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="以卫语句取代嵌套条件表达式"><!--[--><!--]--> 以卫语句取代嵌套条件表达式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/knowledge/codeOptimization.html#将查询函数和修改函数分离" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="将查询函数和修改函数分离"><!--[--><!--]--> 将查询函数和修改函数分离 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--><!--[--><a href="/pages/knowledge/recommendedBook.html" class="nav-link sidebar-heading sidebar-item" aria-label="推荐书籍/视频"><!--[--><!--]--> 推荐书籍/视频 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/knowledge/startMac.html" class="nav-link sidebar-heading sidebar-item" aria-label="mac入门"><!--[--><!--]--> mac入门 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/knowledge/vscodeHotkey.html" class="nav-link sidebar-heading sidebar-item" aria-label="vscode快捷键"><!--[--><!--]--> vscode快捷键 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/knowledge/es6.html" class="nav-link sidebar-heading sidebar-item" aria-label="ES6使用技巧"><!--[--><!--]--> ES6使用技巧 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="代码优化" tabindex="-1"><a class="header-anchor" href="#代码优化" aria-hidden="true">#</a> 代码优化</h1><h2 id="目的" tabindex="-1"><a class="header-anchor" href="#目的" aria-hidden="true">#</a> 目的</h2><p><img src="/other/biger_stronger.jpg" alt="做大做强.jpg"></p><blockquote><p>代码主要是为了写给人看的，而不是写给机器看的，只是顺便也能用机器执行而已。代码和语言文字一样是为了表达思想、记载信息，所以一定要写得清楚整洁才能有效地表达。重构是保证代码质量的一个极其有效的手段，不至于让代码腐化到无可救药的地步。</p><p>一个优秀的程序员应该对自己写的代码负责。</p></blockquote><h2 id="优化方法" tabindex="-1"><a class="header-anchor" href="#优化方法" aria-hidden="true">#</a> 优化方法</h2><h3 id="提炼函数" tabindex="-1"><a class="header-anchor" href="#提炼函数" aria-hidden="true">#</a> 提炼函数</h3><p><strong>what</strong></p><p>浏览一段代码，理解其含义及作用，然后将其提炼到一个独立的函数中，并以这段代码的作用命名。</p><p><strong>where</strong></p><p>如果需要花时间浏览一段代码才能弄清楚它到底要干什么，那么这时候就应该将其提炼到一个函数中，并根据它所做的事命名。以后再读这段代码时，一眼就能知道这个函数的用途。</p><p><strong>how</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">printOwing</span><span class="token punctuation">(</span><span class="token parameter">invoice</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> outstanding <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;***********************&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;**** Customer Owes ****&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;***********************&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>提炼printBanner</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">printOwing</span><span class="token punctuation">(</span><span class="token parameter">invoice</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> outstanding <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
   	<span class="token function">printBanner</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>


<span class="token keyword">function</span> <span class="token function">printBanner</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;***********************&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;**** Customer Owes ****&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;***********************&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p><strong>项目举例</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">async</span> <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter">query</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>id<span class="token punctuation">,</span>type<span class="token punctuation">}</span> <span class="token operator">=</span> query<span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>type<span class="token operator">===</span><span class="token string">&#39;异常&#39;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span>data<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span>api<span class="token punctuation">.</span><span class="token function">getInspectionFaultDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> videos <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
        data<span class="token punctuation">.</span>reportItemVideos<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
            <span class="token keyword">let</span> <span class="token punctuation">{</span>data<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span>api<span class="token punctuation">.</span><span class="token function">getQiniuFileUrl</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span>
            videos<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>item <span class="token operator">=</span> data
        <span class="token keyword">this</span><span class="token punctuation">.</span>item<span class="token punctuation">.</span>reportItemVideos <span class="token operator">=</span> videos
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span>data<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span>api<span class="token punctuation">.</span><span class="token function">getInspectionDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> videos <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
        data<span class="token punctuation">.</span>reportItemVideos<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
            <span class="token keyword">let</span> <span class="token punctuation">{</span>data<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span>api<span class="token punctuation">.</span><span class="token function">getQiniuFileUrl</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span>
            videos<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>item <span class="token operator">=</span> data
        <span class="token keyword">this</span><span class="token punctuation">.</span>item<span class="token punctuation">.</span>reportItemVideos <span class="token operator">=</span> videos
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter">query</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>id<span class="token punctuation">,</span> type<span class="token punctuation">}</span> <span class="token operator">=</span> query<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getDetails</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> type<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">async</span> <span class="token function">getDetails</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> type</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>type<span class="token operator">===</span><span class="token string">&#39;异常&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span>data<span class="token operator">:</span> details<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span>api<span class="token punctuation">.</span><span class="token function">getInspectionFaultDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span>data<span class="token operator">:</span> details<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span>api<span class="token punctuation">.</span><span class="token function">getInspectionDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">let</span> videos <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    data<span class="token punctuation">.</span>reportItemVideos<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">video</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span>api<span class="token punctuation">.</span><span class="token function">getQiniuFileUrl</span><span class="token punctuation">(</span>video<span class="token punctuation">)</span>
        videos<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>details <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>details<span class="token punctuation">,</span> reportItemVideos<span class="token operator">:</span>videos  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br></div></div><h3 id="函数参数化" tabindex="-1"><a class="header-anchor" href="#函数参数化" aria-hidden="true">#</a> 函数参数化</h3><p><strong>what</strong></p><p>以参数的形式传入不同的值，消除重复函数的方法</p><p><strong>where</strong></p><p>如果发现两个函数逻辑非常相似， 只有一些字面量值不同， 可以将其合并成一个函数， 以参数的形式传入不同的值， 从而消除重复。</p><p><strong>how</strong></p><p><strong>范例</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">tenPercentRaise</span><span class="token punctuation">(</span><span class="token parameter">aPerson</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    aPerson<span class="token punctuation">.</span>salary <span class="token operator">=</span> aPerson<span class="token punctuation">.</span>salary<span class="token punctuation">.</span><span class="token function">multiply</span><span class="token punctuation">(</span><span class="token number">1.1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">fivePercentRaise</span><span class="token punctuation">(</span><span class="token parameter">aPerson</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    aPerson<span class="token punctuation">.</span>salary <span class="token operator">=</span> aPerson<span class="token punctuation">.</span>salary<span class="token punctuation">.</span><span class="token function">multiply</span><span class="token punctuation">(</span><span class="token number">1.05</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">raise</span><span class="token punctuation">(</span><span class="token parameter">aPerson<span class="token punctuation">,</span> factor</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    aPerson<span class="token punctuation">.</span>salary <span class="token operator">=</span> aPerson<span class="token punctuation">.</span>salary<span class="token punctuation">.</span><span class="token function">multiply</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> factor<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p><strong>项目举例一</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>

<span class="token comment">// 点击异常项</span>
<span class="token function">faultsItemClick</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        url<span class="token operator">:</span><span class="token string">&#39;pages/inspection/driverInspection/details/faultDetails/index&#39;</span><span class="token punctuation">,</span>
        params<span class="token operator">:</span><span class="token punctuation">{</span>
            id<span class="token operator">:</span> item<span class="token punctuation">.</span>inspectionReportItemId<span class="token punctuation">,</span>
            type<span class="token operator">:</span> <span class="token string">&#39;异常&#39;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 点击正常项</span>
<span class="token function">reportItemClick</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        url<span class="token operator">:</span><span class="token string">&#39;pages/inspection/driverInspection/details/faultDetails/index&#39;</span><span class="token punctuation">,</span>
        params<span class="token operator">:</span><span class="token punctuation">{</span>
            id<span class="token operator">:</span> item<span class="token punctuation">.</span>inspectionReportItemId<span class="token punctuation">,</span>
            type<span class="token operator">:</span> <span class="token string">&#39;正常&#39;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>


<span class="token comment">// ==================重构后==================</span>
<span class="token function">clickItem</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> type</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
     <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        url<span class="token operator">:</span><span class="token string">&#39;pages/inspection/driverInspection/details/faultDetails/index&#39;</span><span class="token punctuation">,</span>
        params<span class="token operator">:</span><span class="token punctuation">{</span>id<span class="token punctuation">,</span> type<span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 调用方</span>
<span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;item-describe&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;clickItem(item.id, &#39;正常&#39;)&quot;</span><span class="token operator">&gt;</span>查看图片<span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br></div></div><p><strong>项目举例二</strong></p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment">&lt;!-- ==================重构前================== --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>upload</span>
       <span class="token attr-name">badge</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>车头<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>需清晰显示车牌，车辆正面外观<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">:sourceType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[<span class="token punctuation">&#39;</span>camera<span class="token punctuation">&#39;</span>]<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">:file-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vehicleForm.vehicleHeadImg<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">@success</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>uploadVehicleHead($event)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>upload</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>upload</span>
       <span class="token attr-name">badge</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>车身铭牌<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>需清晰显示车型，发动机型号信息<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">:sourceType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[<span class="token punctuation">&#39;</span>camera<span class="token punctuation">&#39;</span>]<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">:file-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vehicleForm.vehicleNameplateImg<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">@success</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>uploadVehicleNameplate($event)<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>upload</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// 上传车头照片成功</span>
<span class="token function">uploadVehicleHead</span><span class="token punctuation">(</span><span class="token parameter">$e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>vehicleForm<span class="token punctuation">.</span>vehicleHeadImg <span class="token operator">=</span> $e<span class="token punctuation">.</span>data<span class="token punctuation">.</span>key<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

<span class="token comment">// 上传车身铭牌照片成功</span>
<span class="token function">uploadVehicleNameplate</span><span class="token punctuation">(</span><span class="token parameter">$e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>vehicleForm<span class="token punctuation">.</span>vehicleNameplateImg <span class="token operator">=</span> $e<span class="token punctuation">.</span>data<span class="token punctuation">.</span>key<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- ==================重构后================== --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>upload</span>
       <span class="token attr-name">badge</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>车头<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>需清晰显示车牌，车辆正面外观<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">:sourceType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[<span class="token punctuation">&#39;</span>camera<span class="token punctuation">&#39;</span>]<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">:file-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vehicleForm.vehicleHeadImg<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">@success</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>uploadSuccess($event, <span class="token punctuation">&#39;</span>vehicleHeadImg<span class="token punctuation">&#39;</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>upload</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>upload</span>
       <span class="token attr-name">badge</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>车身铭牌<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>需清晰显示车型，发动机型号信息<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">:sourceType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[<span class="token punctuation">&#39;</span>camera<span class="token punctuation">&#39;</span>]<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">:file-key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vehicleForm.vehicleNameplateImg<span class="token punctuation">&quot;</span></span>
       <span class="token attr-name">@success</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>uploadSuccess($event, <span class="token punctuation">&#39;</span>vehicleNameplateImg<span class="token punctuation">&#39;</span>)<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>upload</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token function">uploadSuccess</span><span class="token punctuation">(</span><span class="token parameter">$e<span class="token punctuation">,</span>type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>trailerForm<span class="token punctuation">[</span>type<span class="token punctuation">]</span> <span class="token operator">=</span> $e<span class="token punctuation">.</span>data<span class="token punctuation">.</span>key
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br></div></div><h3 id="保证对象完整" tabindex="-1"><a class="header-anchor" href="#保证对象完整" aria-hidden="true">#</a> 保证对象完整</h3><p><strong>what</strong></p><p>用整个对象替代多个参数的方式</p><p><strong>where</strong></p><p>当看见代码从一个记录结构中导出几个值， 然后又把这几个值一起传给一个函数， 此时可以把整个记录传给这个函数。</p><p><strong>how</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">withinRange</span><span class="token punctuation">(</span><span class="token parameter">bottom<span class="token punctuation">,</span> top</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>bottom <span class="token operator">&gt;=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_temperatureRange<span class="token punctuation">.</span>low<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>top <span class="token operator">&lt;=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_temperatureRange<span class="token punctuation">.</span>high<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 调用方</span>
<span class="token keyword">const</span> low <span class="token operator">=</span> aRoom<span class="token punctuation">.</span>daysTempRange<span class="token punctuation">.</span>low<span class="token punctuation">;</span>
<span class="token keyword">const</span> high <span class="token operator">=</span> aRoom<span class="token punctuation">.</span>daysTempRange<span class="token punctuation">.</span>high<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>aPlan<span class="token punctuation">.</span><span class="token function">withinRange</span><span class="token punctuation">(</span>low<span class="token punctuation">,</span> high<span class="token punctuation">)</span><span class="token punctuation">)</span>
alerts<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">&quot;room temperature went outside range&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">withinRange</span><span class="token punctuation">(</span><span class="token parameter">aNumberRange</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>aNumberRange<span class="token punctuation">.</span>low <span class="token operator">&gt;=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_temperatureRange<span class="token punctuation">.</span>low<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span>
        <span class="token punctuation">(</span>aNumberRange<span class="token punctuation">.</span>high <span class="token operator">&lt;=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_temperatureRange<span class="token punctuation">.</span>high<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 调用方</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>aPlan<span class="token punctuation">.</span><span class="token function">withinRange</span><span class="token punctuation">(</span>aRoom<span class="token punctuation">.</span>daysTempRange<span class="token punctuation">)</span><span class="token punctuation">)</span>
alerts<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">&quot;room temperature went outside range&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p><strong>项目举例</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token comment">// 点击检查项</span>
<span class="token function">reportItemClick</span><span class="token punctuation">(</span><span class="token parameter">citem</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token string">&#39;pages/inspection/firstInspection/details/faultDetails/index&#39;</span>
    <span class="token comment">// 点击查看图片 || 点击查看原因</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>citem<span class="token punctuation">.</span>inspectionResult<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token string">&quot;QUALIFIED&quot;</span> <span class="token operator">&amp;&amp;</span> citem<span class="token punctuation">.</span>reportItemImages<span class="token punctuation">.</span>length <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            url<span class="token operator">:</span> url<span class="token punctuation">,</span>
            params<span class="token operator">:</span><span class="token punctuation">{</span>
                id<span class="token operator">:</span> citem<span class="token punctuation">.</span>inspectionReportItemId<span class="token punctuation">,</span>
                type<span class="token operator">:</span> <span class="token string">&#39;正常&#39;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>citem<span class="token punctuation">.</span>inspectionResult<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token string">&quot;SKIPPED&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            url<span class="token operator">:</span> url<span class="token punctuation">,</span>
            params<span class="token operator">:</span><span class="token punctuation">{</span>
                reportItem<span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>citem<span class="token punctuation">)</span><span class="token punctuation">,</span>
                type<span class="token operator">:</span> <span class="token string">&#39;未检查&#39;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            url<span class="token operator">:</span> url<span class="token punctuation">,</span>
            params<span class="token operator">:</span><span class="token punctuation">{</span>
                id<span class="token operator">:</span> citem<span class="token punctuation">.</span>inspectionReportItemId<span class="token punctuation">,</span>
                type<span class="token operator">:</span> <span class="token string">&#39;异常&#39;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


<span class="token comment">// ==================重构后==================</span>
<span class="token function">reportItemClick</span><span class="token punctuation">(</span><span class="token parameter">citem</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token string">&#39;pages/inspection/firstInspection/details/faultDetails/index&#39;</span>
    <span class="token comment">// 点击查看图片 || 点击查看原因</span>
    <span class="token keyword">const</span> type <span class="token operator">=</span> <span class="token function">getType</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">const</span> reportItem <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>citem<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        url<span class="token punctuation">,</span>
        params<span class="token operator">:</span><span class="token punctuation">{</span>
            type<span class="token punctuation">,</span>
            reportItem<span class="token punctuation">,</span>
            id<span class="token operator">:</span> citem<span class="token punctuation">.</span>inspectionReportItemId<span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    
    <span class="token function">getType</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>citem<span class="token punctuation">.</span>inspectionResult<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token string">&quot;SKIPPED&quot;</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token string">&#39;未检查&#39;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>citem<span class="token punctuation">.</span>inspectionResult<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token string">&quot;QUALIFIED&quot;</span> <span class="token operator">&amp;&amp;</span> citem<span class="token punctuation">.</span>reportItemImages<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token string">&#39;正常&#39;</span>
        <span class="token keyword">return</span> <span class="token string">&#39;异常&#39;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br></div></div><h3 id="搬移语句到函数" tabindex="-1"><a class="header-anchor" href="#搬移语句到函数" aria-hidden="true">#</a> 搬移语句到函数</h3><p><strong>what</strong></p><p>将执行语句搬移到函数中的方法</p><p><strong>where</strong></p><p>如果调用某个函数时， 总有一些相同的代码也需要每次执行， 那么可以考虑将此段代码合并到函数里头。</p><p><strong>how</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">renderPerson</span><span class="token punctuation">(</span><span class="token parameter">outStream<span class="token punctuation">,</span> person</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;p&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>person<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/p&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">renderPhoto</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span>photo<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;p&gt;title: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>person<span class="token punctuation">.</span>photo<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/p&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">emitPhotoData</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span>photo<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> result<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;\n&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">photoDiv</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">[</span>
        <span class="token string">&quot;&lt;div&gt;&quot;</span><span class="token punctuation">,</span>
        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;p&gt;title: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/p&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token function">emitPhotoData</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token string">&quot;&lt;/div&gt;&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;\n&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> 

<span class="token keyword">function</span> <span class="token function">emitPhotoData</span><span class="token punctuation">(</span><span class="token parameter">aPhoto</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;p&gt;location: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>aPhoto<span class="token punctuation">.</span>location<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/p&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;p&gt;date: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>aPhoto<span class="token punctuation">.</span>date<span class="token punctuation">.</span><span class="token function">toDateString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/p&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> result<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;\n&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*
该例中emitPhotoData函数有两个调用点， 每个调用点的前面都有一行类似的重复代码， 用于打印标题（title） 相关的信息。可以将打印标题那行代码移动到emitPhotoData函数中
*/</span>


<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">renderPerson</span><span class="token punctuation">(</span><span class="token parameter">outStream<span class="token punctuation">,</span> person</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;p&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>person<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/p&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">renderPhoto</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span>photo<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">emitPhotoData</span><span class="token punctuation">(</span>person<span class="token punctuation">.</span>photo<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> result<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;\n&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">photoDiv</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">[</span>
        <span class="token string">&quot;&lt;div&gt;&quot;</span><span class="token punctuation">,</span>
        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;p&gt;title: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/p&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token function">emitPhotoData</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token string">&quot;&lt;/div&gt;&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;\n&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> 

<span class="token keyword">function</span> <span class="token function">emitPhotoData</span><span class="token punctuation">(</span><span class="token parameter">aPhoto</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">[</span>
        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;p&gt;title: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>aPhoto<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/p&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;p&gt;location: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>aPhoto<span class="token punctuation">.</span>location<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/p&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;p&gt;date: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>aPhoto<span class="token punctuation">.</span>date<span class="token punctuation">.</span><span class="token function">toDateString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/p&gt;</span><span class="token template-punctuation string">`</span></span>
    <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;\n&quot;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br></div></div><p><strong>项目举例</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>

<span class="token comment">// 获取挂车轴数字典项</span>
<span class="token function">getAxleNumberDictionaryDynamic</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> dictionary <span class="token operator">=</span> <span class="token string">&#39;TRAILER_AXLE_NUMBER&#39;</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span>api<span class="token punctuation">.</span><span class="token function">dictionaryDynamic</span><span class="token punctuation">(</span>dictionary<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        res<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            item<span class="token punctuation">.</span>value <span class="token operator">=</span> item<span class="token punctuation">.</span>dictionaryItemCode<span class="token punctuation">;</span>
            item<span class="token punctuation">.</span>label <span class="token operator">=</span> item<span class="token punctuation">.</span>dictionaryItemName<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        res<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            value<span class="token operator">:</span> <span class="token string">&#39;其他&#39;</span><span class="token punctuation">,</span>
            label<span class="token operator">:</span> <span class="token string">&#39;其他&#39;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>trailerAxleNumberList <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

<span class="token comment">// 获取挂车轮毂类型字典项</span>
<span class="token function">getHubTypeDictionaryDynamic</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> dictionary <span class="token operator">=</span> <span class="token string">&#39;TRAILER_HUB_TYPE&#39;</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span>api<span class="token punctuation">.</span><span class="token function">dictionaryDynamic</span><span class="token punctuation">(</span>dictionary<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        res<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            item<span class="token punctuation">.</span>value <span class="token operator">=</span> item<span class="token punctuation">.</span>dictionaryItemCode<span class="token punctuation">;</span>
            item<span class="token punctuation">.</span>label <span class="token operator">=</span> item<span class="token punctuation">.</span>dictionaryItemName<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        res<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            value<span class="token operator">:</span> <span class="token string">&#39;其他&#39;</span><span class="token punctuation">,</span>
            label<span class="token operator">:</span> <span class="token string">&#39;其他&#39;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>trailerHubTypeList <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token function">formatDictionaryData</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> formatData <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token operator">...</span>item<span class="token punctuation">,</span>
            label<span class="token operator">:</span>item<span class="token punctuation">.</span>dictionaryItemName<span class="token punctuation">,</span>
            value<span class="token operator">:</span>item<span class="token punctuation">.</span>dictionaryItemCode
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    formatData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">&#39;其他&#39;</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token string">&#39;其他&#39;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> formatData
<span class="token punctuation">}</span><span class="token punctuation">,</span>

<span class="token comment">// 获取挂车轴数字典项</span>
<span class="token keyword">async</span> <span class="token function">getAxleNumberDictionaryDynamic</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span>  <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span>api<span class="token punctuation">.</span><span class="token function">dictionaryDynamic</span><span class="token punctuation">(</span><span class="token string">&#39;TRAILER_AXLE_NUMBER&#39;</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>trailerAxleNumberList <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">formatDictionaryData</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

<span class="token comment">// 获取挂车轮毂类型字典项</span>
<span class="token keyword">async</span> <span class="token function">getHubTypeDictionaryDynamic</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span>  <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span>api<span class="token punctuation">.</span><span class="token function">dictionaryDynamic</span><span class="token punctuation">(</span><span class="token string">&#39;TRAILER_HUB_TYPE&#39;</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>trailerHubTypeList <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">formatDictionaryData</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br></div></div><h3 id="提炼变量" tabindex="-1"><a class="header-anchor" href="#提炼变量" aria-hidden="true">#</a> 提炼变量</h3><p><strong>what</strong></p><p>提炼局部变量替换表达式的方法。</p><p><strong>where</strong></p><p>一个表达式有可能非常复杂而难以阅读。 这种情况下， 可以提炼出一个局部变量帮助我们将表达式分解为比较容易管理的形式 。这样的变量在调试时也很方便， 它们会给调试器和打印语句提供便利。</p><p><strong>how</strong></p><p><strong>范例</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">price</span><span class="token punctuation">(</span><span class="token parameter">order</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//price is base price - quantity discount + shipping</span>
    <span class="token keyword">return</span> order<span class="token punctuation">.</span>quantity <span class="token operator">*</span> order<span class="token punctuation">.</span>itemPrice <span class="token operator">-</span>
    Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> order<span class="token punctuation">.</span>quantity <span class="token operator">-</span> <span class="token number">500</span><span class="token punctuation">)</span> <span class="token operator">*</span> order<span class="token punctuation">.</span>itemPrice <span class="token operator">*</span> <span class="token number">0.05</span> <span class="token operator">+</span>
    Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>order<span class="token punctuation">.</span>quantity <span class="token operator">*</span> order<span class="token punctuation">.</span>itemPrice <span class="token operator">*</span> <span class="token number">0.1</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">price</span><span class="token punctuation">(</span><span class="token parameter">order</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> basePrice <span class="token operator">=</span> order<span class="token punctuation">.</span>quantity <span class="token operator">*</span> order<span class="token punctuation">.</span>itemPrice<span class="token punctuation">;</span>
    <span class="token keyword">const</span> quantityDiscount <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> order<span class="token punctuation">.</span>quantity <span class="token operator">-</span> <span class="token number">500</span><span class="token punctuation">)</span> <span class="token operator">*</span> order<span class="token punctuation">.</span>itemPrice <span class="token operator">*</span> <span class="token number">0.05</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> shipping <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>basePrice <span class="token operator">*</span> <span class="token number">0.1</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> basePrice <span class="token operator">-</span> quantityDiscount <span class="token operator">+</span> shipping<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="内联变量" tabindex="-1"><a class="header-anchor" href="#内联变量" aria-hidden="true">#</a> 内联变量</h3><p><strong>what</strong></p><p>用变量右侧表达式消除变量</p><p><strong>where</strong></p><p>变量名字并不比表达式本身更具表现力时可以采取该方法</p><p><strong>how</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">let</span> basePrice <span class="token operator">=</span> anOrder<span class="token punctuation">.</span>basePrice<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>basePrice <span class="token operator">&gt;</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">return</span> anOrder<span class="token punctuation">.</span>basePrice <span class="token operator">&gt;</span> <span class="token number">1000</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="封装变量" tabindex="-1"><a class="header-anchor" href="#封装变量" aria-hidden="true">#</a> 封装变量</h3><p><strong>what</strong></p><p>将变量封装起来，只允许通过函数访问。</p><p><strong>where</strong></p><p>对于所有可变的数据， 只要它的作用域超出单个函数，就可以采用封装变量的方法。数据被使用得越广， 就越是值得花精力给它一个体面的封装。</p><p><strong>how</strong></p><p><strong>范例一</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">let</span> defaultOwner <span class="token operator">=</span> <span class="token punctuation">{</span>firstName<span class="token operator">:</span> <span class="token string">&quot;Martin&quot;</span><span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token string">&quot;Fowler&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 访问</span>
spaceship<span class="token punctuation">.</span>owner <span class="token operator">=</span> defaultOwner<span class="token punctuation">;</span>
<span class="token comment">// 赋值</span>
defaultOwner <span class="token operator">=</span> <span class="token punctuation">{</span>firstName<span class="token operator">:</span> <span class="token string">&quot;Rebecca&quot;</span><span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token string">&quot;Parsons&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">getDefaultOwner</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> defaultOwner<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">setDefaultOwner</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>defaultOwner <span class="token operator">=</span> arg<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">// 访问</span>
spaceship<span class="token punctuation">.</span>owner <span class="token operator">=</span> <span class="token function">getDefaultOwner</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 赋值</span>
<span class="token function">setDefaultOwner</span><span class="token punctuation">(</span><span class="token punctuation">{</span>firstName<span class="token operator">:</span> <span class="token string">&quot;Rebecca&quot;</span><span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token string">&quot;Parsons&quot;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p><strong>范例二</strong></p><p>限制变量的可见性</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// defaultOwner.js</span>
<span class="token keyword">let</span> defaultOwner <span class="token operator">=</span> <span class="token punctuation">{</span>firstName<span class="token operator">:</span> <span class="token string">&quot;Martin&quot;</span><span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token string">&quot;Fowler&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getDefaultOwner</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> defaultOwner <span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">setDefaultOwner</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>defaultOwner <span class="token operator">=</span> arg <span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>范例三</strong></p><p>上例中限制了数据引用的访问和重新赋值， 但并不能控制对结构内部数据项的修改。</p><p>常见控制对结构内部数据项修改的方法有两种，一是返回一个副本，另一种为封装记录。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 返回一个副本</span>
<span class="token keyword">let</span> defaultOwnerData <span class="token operator">=</span> <span class="token punctuation">{</span>firstName<span class="token operator">:</span> <span class="token string">&quot;Martin&quot;</span><span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token string">&quot;Fowler&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getDefaultOwner</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> defaultOwnerData<span class="token punctuation">)</span> <span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">setDefaultOwner</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>defaultOwnerData <span class="token operator">=</span> arg <span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 封装记录</span>
<span class="token keyword">let</span> defaultOwnerData <span class="token operator">=</span> <span class="token punctuation">{</span>firstName<span class="token operator">:</span> <span class="token string">&quot;Martin&quot;</span><span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token string">&quot;Fowler&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getDefaultOwner</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span>defaultOwnerData<span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">setDefaultOwner</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>defaultOwnerData <span class="token operator">=</span> arg <span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Person</span><span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>_lastName <span class="token operator">=</span> data<span class="token punctuation">.</span>lastName
        <span class="token keyword">this</span><span class="token punctuation">.</span>_firstName <span class="token operator">=</span> data<span class="token punctuation">.</span>firstName
    <span class="token punctuation">}</span>
    <span class="token keyword">get</span> <span class="token function">lastName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_lastName <span class="token punctuation">}</span>
    <span class="token keyword">get</span> <span class="token function">firstName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_firstName <span class="token punctuation">}</span>
    <span class="token keyword">get</span> <span class="token function">defaultOwner</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> firstName<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_firstName<span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_lastName <span class="token punctuation">}</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="函数组合成变换函数" tabindex="-1"><a class="header-anchor" href="#函数组合成变换函数" aria-hidden="true">#</a> 函数组合成变换函数</h3><p><strong>what</strong></p><p>数据变换（transform） 函数： 这种函数接受源数据作为输入， 计算出所有的派生数据， 将派生数据以字段形式填入输出数据 。</p><p><strong>where</strong></p><p>当把数据传递给一个程序， 让它再计算出各种派生信息。这些派生数值可能会在几个不同地方用到， 因此这些计算逻辑也常会在用到派生数据的地方重复，此时可以使用变换函数，将所有计算派生数据的逻辑收拢到一起。</p><p>优点：这样始终可以在固定的地方找到和更新这些计算逻辑， 避免到处重复。</p><p><strong>和组合成类的区别</strong>：如果代码中会对源数据做更新， 那么使用类要好得多； 如果使用变换， 派生数据会被存储在新生成的记录中， 一旦源数据被修改， 就会遭遇数据不一致。</p><p><strong>how</strong></p><p><strong>范例</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>

<span class="token comment">// 客户端1</span>
<span class="token keyword">const</span> aReading <span class="token operator">=</span> <span class="token function">acquireReading</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> baseCharge <span class="token operator">=</span> <span class="token function">baseRate</span><span class="token punctuation">(</span>aReading<span class="token punctuation">.</span>month<span class="token punctuation">,</span> aReading<span class="token punctuation">.</span>year<span class="token punctuation">)</span> <span class="token operator">*</span> aReading<span class="token punctuation">.</span>quantity

<span class="token comment">// 客户端2</span>
<span class="token keyword">const</span> aReading <span class="token operator">=</span> <span class="token function">acquireReading</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> base <span class="token operator">=</span> <span class="token function">baseRate</span><span class="token punctuation">(</span>aReading<span class="token punctuation">.</span>month<span class="token punctuation">,</span> aReading<span class="token punctuation">.</span>year<span class="token punctuation">)</span> <span class="token operator">*</span> aReading<span class="token punctuation">.</span>quantity
<span class="token comment">// 计算税费</span>
<span class="token keyword">const</span> taxableCharge <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> base <span class="token operator">-</span> <span class="token function">taxThreshold</span><span class="token punctuation">(</span>aReading<span class="token punctuation">.</span>year<span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">// 客户端3</span>
<span class="token keyword">const</span> aReading <span class="token operator">=</span> <span class="token function">acquireReading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> basicChargeAmount <span class="token operator">=</span> <span class="token function">calculateBaseCharge</span><span class="token punctuation">(</span>aReading<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">calculateBaseCharge</span><span class="token punctuation">(</span><span class="token parameter">aReading</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">baseRate</span><span class="token punctuation">(</span>aReading<span class="token punctuation">.</span>month<span class="token punctuation">,</span> aReading<span class="token punctuation">.</span>year<span class="token punctuation">)</span> <span class="token operator">*</span> aReading<span class="token punctuation">.</span>quantity<span class="token punctuation">;</span>
<span class="token punctuation">}</span>


<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">enrichReading</span><span class="token punctuation">(</span><span class="token parameter">original</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> result <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>original<span class="token punctuation">)</span><span class="token punctuation">;</span>
    result<span class="token punctuation">.</span>baseCharge <span class="token operator">=</span> <span class="token function">calculateBaseCharge</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
    result<span class="token punctuation">.</span>taxableCharge <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> result<span class="token punctuation">.</span>baseCharge <span class="token operator">-</span> <span class="token function">taxThreshold</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>year<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> result<span class="token punctuation">;</span>
    
    <span class="token keyword">function</span> <span class="token function">calculateBaseCharge</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">baseRate</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>month<span class="token punctuation">,</span> result<span class="token punctuation">.</span>year<span class="token punctuation">)</span> <span class="token operator">*</span> result<span class="token punctuation">.</span>quantity<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> 
<span class="token punctuation">}</span>

<span class="token comment">// 优化后客户端1</span>
<span class="token keyword">const</span> rawReading <span class="token operator">=</span> <span class="token function">acquireReading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> aReading <span class="token operator">=</span> <span class="token function">enrichReading</span><span class="token punctuation">(</span>rawReading<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> baseCharge <span class="token operator">=</span> aReading<span class="token punctuation">.</span>baseCharge<span class="token punctuation">;</span>

<span class="token comment">// 客户端2</span>
<span class="token keyword">const</span> rawReading <span class="token operator">=</span> <span class="token function">acquireReading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> aReading <span class="token operator">=</span> <span class="token function">enrichReading</span><span class="token punctuation">(</span>rawReading<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> taxableCharge <span class="token operator">=</span> aReading<span class="token punctuation">.</span>taxableCharge<span class="token punctuation">;</span>

<span class="token comment">// 优化后客户端3</span>
<span class="token keyword">const</span> rawReading <span class="token operator">=</span> <span class="token function">acquireReading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> aReading <span class="token operator">=</span> <span class="token function">enrichReading</span><span class="token punctuation">(</span>rawReading<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> basicChargeAmount <span class="token operator">=</span> aReading<span class="token punctuation">.</span>baseCharge<span class="token punctuation">;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br></div></div><h3 id="拆分阶段" tabindex="-1"><a class="header-anchor" href="#拆分阶段" aria-hidden="true">#</a> 拆分阶段</h3><p><strong>what</strong></p><p>把一大段行为拆分成多个顺序执行的阶段</p><p><strong>where</strong></p><p>当看见一段代码在同时处理两件不同的事， 可以把它拆分成各自独立的模块， 因为这样到了需要修改的时候， 我就可以单独处理每个主题。</p><p>常用于1.你有一段处理逻辑， 其输入数据的格式不符合计算逻辑的要求， 先对输入数据做一番调整， 使其便于处理。 2.把数据处理逻辑分成顺序执行的多个步骤， 每个步骤负责的任务全然不同。</p><p><strong>how</strong></p><p><strong>范例一</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">const</span> orderData <span class="token operator">=</span> orderString<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\s+</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> productPrice <span class="token operator">=</span> priceList<span class="token punctuation">[</span>orderData<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;-&quot;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> orderPrice <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>orderData<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">*</span> productPrice<span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">const</span> orderRecord <span class="token operator">=</span> <span class="token function">parseOrder</span><span class="token punctuation">(</span>order<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> orderPrice <span class="token operator">=</span> <span class="token function">price</span><span class="token punctuation">(</span>orderRecord<span class="token punctuation">,</span> priceList<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">parseOrder</span><span class="token punctuation">(</span><span class="token parameter">aString</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> values <span class="token operator">=</span> aString<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\s+</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
        productID<span class="token operator">:</span> values<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;-&quot;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        quantity<span class="token operator">:</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">price</span><span class="token punctuation">(</span><span class="token parameter">order<span class="token punctuation">,</span> priceList</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> order<span class="token punctuation">.</span>quantity <span class="token operator">*</span> priceList<span class="token punctuation">[</span>order<span class="token punctuation">.</span>productID<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p><strong>范例二</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">priceOrder</span><span class="token punctuation">(</span><span class="token parameter">product<span class="token punctuation">,</span> quantity<span class="token punctuation">,</span> shippingMethod</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> basePrice <span class="token operator">=</span> product<span class="token punctuation">.</span>basePrice <span class="token operator">*</span> quantity<span class="token punctuation">;</span>
    <span class="token keyword">const</span> discount <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>quantity <span class="token operator">-</span> product<span class="token punctuation">.</span>discountThreshold<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
    <span class="token operator">*</span> product<span class="token punctuation">.</span>basePrice <span class="token operator">*</span> product<span class="token punctuation">.</span>discountRate<span class="token punctuation">;</span>
    <span class="token keyword">const</span> shippingPerCase <span class="token operator">=</span> <span class="token punctuation">(</span>basePrice <span class="token operator">&gt;</span> shippingMethod<span class="token punctuation">.</span>discountThreshold<span class="token punctuation">)</span>
    <span class="token operator">?</span> shippingMethod<span class="token punctuation">.</span>discountedFee <span class="token operator">:</span> shippingMethod<span class="token punctuation">.</span>feePerCase<span class="token punctuation">;</span>
    <span class="token keyword">const</span> shippingCost <span class="token operator">=</span> quantity <span class="token operator">*</span> shippingPerCase<span class="token punctuation">;</span>
    <span class="token keyword">const</span> price <span class="token operator">=</span> basePrice <span class="token operator">-</span> discount <span class="token operator">+</span> shippingCost<span class="token punctuation">;</span>
    <span class="token keyword">return</span> price<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/*
该例中前两行代码根据商品（product） 信息计算订单中与商品相关的价格， 随后的两行则根据配送（shipping） 信息计算配送成本。
后续的修改可能还会使价格和配送的计算逻辑变复杂， 但只要这两块逻辑相对独立， 将这段代码拆分成两个阶段就是有价值的。
*/</span>



<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">priceOrder</span><span class="token punctuation">(</span><span class="token parameter">product<span class="token punctuation">,</span> quantity<span class="token punctuation">,</span> shippingMethod</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> priceData <span class="token operator">=</span> <span class="token function">calculatePricingData</span><span class="token punctuation">(</span>product<span class="token punctuation">,</span> quantity<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">applyShipping</span><span class="token punctuation">(</span>priceData<span class="token punctuation">,</span> shippingMethod<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 计算商品价格</span>
<span class="token keyword">function</span> <span class="token function">calculatePricingData</span><span class="token punctuation">(</span><span class="token parameter">product<span class="token punctuation">,</span> quantity</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> basePrice <span class="token operator">=</span> product<span class="token punctuation">.</span>basePrice <span class="token operator">*</span> quantity<span class="token punctuation">;</span>
    <span class="token keyword">const</span> discount <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>quantity <span class="token operator">-</span> product<span class="token punctuation">.</span>discountThreshold<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
    <span class="token operator">*</span> product<span class="token punctuation">.</span>basePrice <span class="token operator">*</span> product<span class="token punctuation">.</span>discountRate<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>basePrice<span class="token operator">:</span> basePrice<span class="token punctuation">,</span> quantity<span class="token operator">:</span> quantity<span class="token punctuation">,</span> discount<span class="token operator">:</span>discount<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 计算配送价格</span>
<span class="token keyword">function</span> <span class="token function">applyShipping</span><span class="token punctuation">(</span><span class="token parameter">priceData<span class="token punctuation">,</span> shippingMethod</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> shippingPerCase <span class="token operator">=</span> <span class="token punctuation">(</span>priceData<span class="token punctuation">.</span>basePrice <span class="token operator">&gt;</span> shippingMethod<span class="token punctuation">.</span>discountThreshold<span class="token punctuation">)</span>
    <span class="token operator">?</span> shippingMethod<span class="token punctuation">.</span>discountedFee <span class="token operator">:</span> shippingMethod<span class="token punctuation">.</span>feePerCase<span class="token punctuation">;</span>
    <span class="token keyword">const</span> shippingCost <span class="token operator">=</span> priceData<span class="token punctuation">.</span>quantity <span class="token operator">*</span> shippingPerCase<span class="token punctuation">;</span>
    <span class="token keyword">return</span> priceData<span class="token punctuation">.</span>basePrice <span class="token operator">-</span> priceData<span class="token punctuation">.</span>discount <span class="token operator">+</span> shippingCost<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div><h3 id="以函数调用取代内联代码" tabindex="-1"><a class="header-anchor" href="#以函数调用取代内联代码" aria-hidden="true">#</a> 以函数调用取代内联代码</h3><p><strong>what</strong></p><p>用调用函数的方式替代代码块</p><p><strong>where</strong></p><p>当见到一些内联代码， 它们做的事情仅仅是已有函数的重复， 可以用一个函数调用取代内联代码。 甚至连函数体都不需要自己编写了， 函数库已经提供了相应的函数 。 善用函数可以帮助我将相关的行为打包起来。</p><p><strong>how</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">let</span> appliesToMass <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">const</span> s <span class="token keyword">of</span> states<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>s <span class="token operator">===</span> <span class="token string">&quot;MA&quot;</span><span class="token punctuation">)</span> appliesToMass <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">let</span> appliesToMass <span class="token operator">=</span> states<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">&quot;MA&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="拆分循环" tabindex="-1"><a class="header-anchor" href="#拆分循环" aria-hidden="true">#</a> 拆分循环</h3><p><strong>what</strong></p><p>将一个循环拆分成多个循环</p><p><strong>where</strong></p><p>当遇到一个身兼多职的循环时可以将循环拆解，让一个循环只做一件事情， 那就能确保每次修改时你只需要理解要修改的那块代码的行为就可以了。 该行为可能会被质疑，因为它会迫使你执行两次甚至多次循环， 实际情况是，即使处理的列表数据更多一些， 循环本身也很少成为性能瓶颈， 更何况拆分出循环来通常还使一些更强大的优化手段变得可能。</p><p><strong>how</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">let</span> youngest <span class="token operator">=</span> people<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">?</span> people<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>age <span class="token operator">:</span> <span class="token number">Infinity</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> totalSalary <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>p<span class="token punctuation">.</span>age <span class="token operator">&lt;</span> youngest<span class="token punctuation">)</span> youngest <span class="token operator">=</span> p<span class="token punctuation">.</span>age<span class="token punctuation">;</span>
    totalSalary <span class="token operator">+=</span> p<span class="token punctuation">.</span>salary<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">youngestAge: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>youngest<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, totalSalary: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>totalSalary<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">let</span> totalSalary <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    totalSalary <span class="token operator">+=</span> p<span class="token punctuation">.</span>salary<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> youngest <span class="token operator">=</span> people<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">?</span> people<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>age <span class="token operator">:</span> <span class="token number">Infinity</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>p<span class="token punctuation">.</span>age <span class="token operator">&lt;</span> youngest<span class="token punctuation">)</span> youngest <span class="token operator">=</span> p<span class="token punctuation">.</span>age<span class="token punctuation">;</span>
<span class="token punctuation">}</span> 
<span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">youngestAge: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>youngest<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, totalSalary: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>totalSalary<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token comment">// 提炼函数</span>
<span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">youngestAge: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">youngestAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, totalSalary: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">totalSalary</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">totalSalary</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> totalSalary <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        totalSalary <span class="token operator">+=</span> p<span class="token punctuation">.</span>salary<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> totalSalary<span class="token punctuation">;</span>
<span class="token punctuation">}</span> 
<span class="token keyword">function</span> <span class="token function">youngestAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> youngest <span class="token operator">=</span> people<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">?</span> people<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>age <span class="token operator">:</span> <span class="token number">Infinity</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>p<span class="token punctuation">.</span>age <span class="token operator">&lt;</span> youngest<span class="token punctuation">)</span> youngest <span class="token operator">=</span> p<span class="token punctuation">.</span>age<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> youngest<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 进一步优化</span>
<span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">youngestAge: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">youngestAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, totalSalary: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">totalSalary</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">totalSalary</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> people<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span>p</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> total <span class="token operator">+</span> p<span class="token punctuation">.</span>salary<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">youngestAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token operator">...</span>people<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">p</span> <span class="token operator">=&gt;</span> p<span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br></div></div><h3 id="拆分变量" tabindex="-1"><a class="header-anchor" href="#拆分变量" aria-hidden="true">#</a> 拆分变量</h3><p><strong>what</strong></p><p>将一个变量拆分成两个或多个变量</p><p><strong>where</strong></p><p>如果变量承担多个责任， 它就应该被替换为多个变量， 每个变量只承担一个责任。</p><p><strong>how</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">let</span> temp <span class="token operator">=</span> <span class="token number">2</span> <span class="token operator">*</span> <span class="token punctuation">(</span>height <span class="token operator">+</span> width<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>temp<span class="token punctuation">)</span><span class="token punctuation">;</span>
temp <span class="token operator">=</span> height <span class="token operator">*</span> width<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>temp<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">const</span> perimeter <span class="token operator">=</span> <span class="token number">2</span> <span class="token operator">*</span> <span class="token punctuation">(</span>height <span class="token operator">+</span> width<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>perimeter<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> area <span class="token operator">=</span> height <span class="token operator">*</span> width<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>area<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="分解条件表达式" tabindex="-1"><a class="header-anchor" href="#分解条件表达式" aria-hidden="true">#</a> 分解条件表达式</h3><p><strong>what</strong></p><p>将条件表达式提炼成函数的手法</p><p><strong>where</strong></p><p>在带有复杂条件逻辑的函数中，往往可以将原函数中对应的代码改为调用新函数。</p><p>对于条件逻辑， 将每个分支条件分解成新函数可以带来的好处：</p><ul><li><p>提高可读性</p></li><li><p>可以突出条件逻辑， 更清楚地表明每个分支的作用</p></li><li><p>突出每个分支的原因</p></li></ul><p><strong>how</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token comment">// 计算一件商品的总价，该商品在冬季和夏季的单价是不同的</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>aDate<span class="token punctuation">.</span><span class="token function">isBefore</span><span class="token punctuation">(</span>plan<span class="token punctuation">.</span>summerStart<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>aDate<span class="token punctuation">.</span><span class="token function">isAfter</span><span class="token punctuation">(</span>plan<span class="token punctuation">.</span>summerEnd<span class="token punctuation">)</span><span class="token punctuation">)</span>
charge <span class="token operator">=</span> quantity <span class="token operator">*</span> plan<span class="token punctuation">.</span>summerRate<span class="token punctuation">;</span>
<span class="token keyword">else</span>
charge <span class="token operator">=</span> quantity <span class="token operator">*</span> plan<span class="token punctuation">.</span>regularRate <span class="token operator">+</span> plan<span class="token punctuation">.</span>regularServiceCharge<span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">summer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    charge <span class="token operator">=</span> <span class="token function">summerCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">else</span>
    charge <span class="token operator">=</span> <span class="token function">regularCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">summer</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">!</span>aDate<span class="token punctuation">.</span><span class="token function">isBefore</span><span class="token punctuation">(</span>plan<span class="token punctuation">.</span>summerStart<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>aDate<span class="token punctuation">.</span><span class="token function">isAfter</span><span class="token punctuation">(</span>plan<span class="token punctuation">.</span>summerEnd<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">summerCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> quantity <span class="token operator">*</span> plan<span class="token punctuation">.</span>summerRate<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">regularCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> quantity <span class="token operator">*</span> plan<span class="token punctuation">.</span>regularRate <span class="token operator">+</span> plan<span class="token punctuation">.</span>regularServiceCharge<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 进一步优化（使用三元运算符）</span>
charge <span class="token operator">=</span> <span class="token function">summer</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">summerCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">regularCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">summer</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">!</span>aDate<span class="token punctuation">.</span><span class="token function">isBefore</span><span class="token punctuation">(</span>plan<span class="token punctuation">.</span>summerStart<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>aDate<span class="token punctuation">.</span><span class="token function">isAfter</span><span class="token punctuation">(</span>plan<span class="token punctuation">.</span>summerEnd<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">summerCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> quantity <span class="token operator">*</span> plan<span class="token punctuation">.</span>summerRate<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">regularCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> quantity <span class="token operator">*</span> plan<span class="token punctuation">.</span>regularRate <span class="token operator">+</span> plan<span class="token punctuation">.</span>regularServiceCharge<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br></div></div><h3 id="合并条件表达式" tabindex="-1"><a class="header-anchor" href="#合并条件表达式" aria-hidden="true">#</a> 合并条件表达式</h3><p><strong>what</strong></p><p>将多个条件表达式合并</p><p><strong>where</strong></p><p>当发现这样一串条件检查： 检查条件各不相同， 最终行为却一致。 如果发现这种情况， 就应该使用“逻辑或”和“逻辑与”将它们合并为一个条件表达式。</p><p><strong>how</strong></p><p><strong>范例一</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>seniority <span class="token operator">&lt;</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>monthsDisabled <span class="token operator">&gt;</span> <span class="token number">12</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>isPartTime<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isNotEligableForDisability</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">isNotEligableForDisability</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>seniority <span class="token operator">&lt;</span> <span class="token number">2</span><span class="token punctuation">)</span>
            <span class="token operator">||</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>monthsDisabled <span class="token operator">&gt;</span> <span class="token number">12</span><span class="token punctuation">)</span>
            <span class="token operator">||</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>isPartTime<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p><strong>范例二</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>onVacation<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>seniority <span class="token operator">&gt;</span> <span class="token number">10</span><span class="token punctuation">)</span>
    	<span class="token keyword">return</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token number">0.5</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>onVacation<span class="token punctuation">)</span>
	<span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>seniority <span class="token operator">&gt;</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token number">0.5</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="以卫语句取代嵌套条件表达式" tabindex="-1"><a class="header-anchor" href="#以卫语句取代嵌套条件表达式" aria-hidden="true">#</a> 以卫语句取代嵌套条件表达式</h3><p><strong>what</strong></p><p>如果某个条件极其罕见， 就应该单独检查该条件， 并在该条件为真时立刻从函数中返回。 这样的单独检查常常被称为“卫语句”（guard clauses） 。 该方法正如其名称一样是一种使用卫语句取代嵌套条件表达式的方法。</p><p><strong>where</strong></p><p>如果使用if-then-else结构， 你对if分支和else分支的重视是同等的。 这样的代码结构传递给阅读者的消息就是： 各个分支有同样的重要性。 卫语句就不同了， 它告诉阅读者： “这种情况不是本函数的核心逻辑所关心的， 如果它真发生了， 请做一些必要的整理工作， 然后退出。 ” 为了传递这种信息可以使用卫语句替换嵌套结构。</p><p><strong>how</strong></p><p><strong>范例一</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">payAmount</span><span class="token punctuation">(</span><span class="token parameter">employee</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> result<span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>employee<span class="token punctuation">.</span>isSeparated<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        result <span class="token operator">=</span> <span class="token punctuation">{</span>amount<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> reasonCode<span class="token operator">:</span><span class="token string">&quot;SEP&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>employee<span class="token punctuation">.</span>isRetired<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            result <span class="token operator">=</span> <span class="token punctuation">{</span>amount<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> reasonCode<span class="token operator">:</span> <span class="token string">&quot;RET&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">else</span> <span class="token punctuation">{</span>
            result <span class="token operator">=</span> <span class="token function">someFinalComputation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">payAmount</span><span class="token punctuation">(</span><span class="token parameter">employee</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>employee<span class="token punctuation">.</span>isSeparated<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">{</span>amount<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> reasonCode<span class="token operator">:</span> <span class="token string">&quot;SEP&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>employee<span class="token punctuation">.</span>isRetired<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">{</span>amount<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> reasonCode<span class="token operator">:</span> <span class="token string">&quot;RET&quot;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">someFinalComputation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p><strong>范例二</strong>：将条件反转</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">adjustedCapital</span><span class="token punctuation">(</span><span class="token parameter">anInstrument</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>anInstrument<span class="token punctuation">.</span>capital <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>anInstrument<span class="token punctuation">.</span>interestRate <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> anInstrument<span class="token punctuation">.</span>duration <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            result <span class="token operator">=</span> <span class="token punctuation">(</span>anInstrument<span class="token punctuation">.</span>income <span class="token operator">/</span> anInstrument<span class="token punctuation">.</span>duration<span class="token punctuation">)</span> <span class="token operator">*</span> anInstrument<span class="token punctuation">.</span>adjustmentFactor<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">adjustedCapital</span><span class="token punctuation">(</span><span class="token parameter">anInstrument</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span> anInstrument<span class="token punctuation">.</span>capital <span class="token operator">&lt;=</span> <span class="token number">0</span>
        <span class="token operator">||</span> anInstrument<span class="token punctuation">.</span>interestRate <span class="token operator">&lt;=</span> <span class="token number">0</span>
        <span class="token operator">||</span> anInstrument<span class="token punctuation">.</span>duration <span class="token operator">&lt;=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>anInstrument<span class="token punctuation">.</span>income <span class="token operator">/</span> anInstrument<span class="token punctuation">.</span>duration<span class="token punctuation">)</span> <span class="token operator">*</span> anInstrument<span class="token punctuation">.</span>adjustmentFactor<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="将查询函数和修改函数分离" tabindex="-1"><a class="header-anchor" href="#将查询函数和修改函数分离" aria-hidden="true">#</a> 将查询函数和修改函数分离</h3><p><strong>what</strong></p><p>将查询动作从修改动作中分离出来的方式</p><p><strong>where</strong></p><p>如果遇到一个“既有返回值又有副作用”的函数，此时可以将查询动作从修改动作中分离出来。</p><p><strong>how</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">alertForMiscreant</span> <span class="token punctuation">(</span><span class="token parameter">people</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>p <span class="token operator">===</span> <span class="token string">&quot;Don&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">setOffAlarms</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token string">&quot;Don&quot;</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>p <span class="token operator">===</span> <span class="token string">&quot;John&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">setOffAlarms</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token string">&quot;John&quot;</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 调用方</span>
<span class="token keyword">const</span> found <span class="token operator">=</span> <span class="token function">alertForMiscreant</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">findMiscreant</span> <span class="token punctuation">(</span><span class="token parameter">people</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>p <span class="token operator">===</span> <span class="token string">&quot;Don&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token string">&quot;Don&quot;</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>p <span class="token operator">===</span> <span class="token string">&quot;John&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token string">&quot;John&quot;</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">alertForMiscreant</span> <span class="token punctuation">(</span><span class="token parameter">people</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">findMiscreant</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span> <span class="token function">setOffAlarms</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 调用方</span>
<span class="token keyword">const</span> found <span class="token operator">=</span> <span class="token function">findMiscreant</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alertForMiscreant</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br></div></div><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><span class="meta-item-info">2021-12-3 18:04:41</span></div><div class="meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 1928537900@qq.com">jinleiFu</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"> ← <a href="/pages/knowledge/Vue3.html" class="nav-link" aria-label="Vue3常用新特性"><!--[--><!--]--> Vue3常用新特性 <!--[--><!--]--></a></span><span class="next"><a href="/pages/knowledge/recommendedBook.html" class="nav-link" aria-label="推荐书籍/视频"><!--[--><!--]--> 推荐书籍/视频 <!--[--><!--]--></a> → </span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script src="/assets/js/runtime~app.7eeb5ba6.js" defer></script><script src="/assets/js/6135.d16fec79.js" defer></script><script src="/assets/js/app.4602c005.js" defer></script>
  </body>
</html>
